<template>
  <div :id="props.question.questionId" class="question-container">
    <!-- 题目 -->
    <div class="question-title">
      <span v-if="props.index > 0">{{ index }}.</span>
      <div class="title-type">
        【
        <enum-view :enum-name="'QuestionType'" :enum-value="props.question.questionType" />
        】<span class="title-content" v-html="props.question.questionTitle"></span>
      </div>
    </div>
    <!-- 选项 -->
    <div class="question-option">
      <div v-if="props.question.questionType === 1">
        <div v-for="(item, index) in props.question.options" :key="index" class="question-option-item">
          <!-- 单选题 -->
          <div class="symbol" :class="{ answer: props.question.questionAnswer === item.optionContent }">{{ changeNumToEn(index) }}</div>
          <div v-html="item.optionContent" />
        </div>
      </div>
      <div v-if="props.question.questionType === 2">
        <div v-for="(item, index) in props.question.options" :key="index" class="question-option-item">
          <!-- 多选题 -->
          <div class="symbol" :class="{ answer: props.question.questionAnswer2 && props.question.questionAnswer2.indexOf(item.optionContent) > -1 }">
            {{ changeNumToEn(index) }}
          </div>
          <div v-html="item.optionContent" />
        </div>
      </div>
    </div>
    <div class="question-result">
      <div class="question-answer">
        <div>答案：</div>
        <div v-if="props.question.questionType === 1">
          <!-- 单选题 -->
          <div v-for="(item, index) in props.question.options" :key="index">
            <div v-if="props.question.questionAnswer === item.optionContent" class="symbol">{{ changeNumToEn(index) }}</div>
          </div>
        </div>
        <div v-if="props.question.questionType === 2" style="display: flex">
          <!-- 多选题 -->
          <div v-for="(item, index) in props.question.options" :key="index">
            <div v-if="props.question.questionAnswer2 && props.question.questionAnswer2.indexOf(item.optionContent) > -1" class="symbol">{{ changeNumToEn(index) }}</div>
          </div>
        </div>
        <div v-if="props.question.questionType === 3">
          <!-- 判断题 -->
          {{ props.question.questionAnswer }}
        </div>
        <div v-if="props.question.questionType === 4">
          <!-- 填空题 -->
          <div v-for="(item, index) in props.question.questionAnswer4" :key="index">
            <div>第{{ index + 1 }}个空：【{{ item }}】</div>
          </div>
        </div>
        <div v-if="props.question.questionType === 5" class="analysis">
          <!-- 简答题 -->
          <span v-html="props.question.questionAnswer" />
        </div>
      </div>
      <div class="difficulty-level">
        难度：
        <enum-view :enum-name="'DifficultyLevel'" :enum-value="props.question.difficultyLevel"></enum-view>
      </div>
      <div class="question-Analysis">
        解析：
        <div class="analysis"><span v-html="props.question.questionAnalysis" /></div>
      </div>
    </div>
  </div>
</template>

<script setup>
  import EnumView from '@/components/Enum/View/index.vue'
  import { changeNumToEn } from '@/utils/base.js'

  const props = defineProps({
    question: {
      type: Object,
      default: () => {}
    },
    index: {
      type: Number,
      default: 0
    }
  })
</script>
<style lang="scss" scoped>
  .question-container {
    margin-bottom: 10px;
    line-height: 40px;

    .question-title {
      display: flex;
      line-height: 25px;

      .title-content {
        flex: 1;
      }
    }

    .question-option {
      display: flex;
      flex-direction: column;

      .question-option-item {
        display: flex;
        align-items: center;
      }
    }

    .question-result {
      background-color: #f5f5f4;
      padding: 10px;
      border-radius: 5px;
      margin-top: 10px;
      margin-bottom: 20px;
      font-size: 14px;
    }

    .question-answer,
    .difficulty-level,
    .question-Analysis {
      display: flex;
      line-height: 25px;
      flex-direction: row;
      color: #777;
    }

    .analysis {
      flex: 1;
    }

    .symbol {
      border: 1px solid #d9d9d9;
      border-radius: 50%;
      min-width: 25px;
      height: 25px;
      line-height: 23px;
      text-align: center;
      margin-right: 10px;
    }

    // 试卷题目答案样式
    .answer {
      background-color: blue;
      color: #fff;
    }

    :deep(p) {
      margin: 0;
      display: inline;
    }

    :deep(img) {
      vertical-align: middle;
    }
  }
</style>
